<template>
  <div class="prediction-card backdrop-blur-2xl rounded-2xl p-6 shadow-2xl border border-white/10 hover:border-white/20 transition-all duration-300">
    <!-- 头部 -->
    <div class="flex items-start justify-between mb-6">
      <div>
        <h3 class="text-2xl font-bold text-white mb-1">{{ prediction.indexName }}</h3>
        <p class="text-sm text-gray-400">{{ prediction.indexCode }}</p>
      </div>
      <div class="text-right">
        <p class="text-3xl font-bold text-[#42d392]">{{ prediction.currentPrice }}</p>
        <p class="text-xs text-gray-500">当前点位</p>
      </div>
    </div>

    <!-- 综合概率 -->
    <div class="grid grid-cols-2 gap-4 mb-6 pb-6 border-b border-white/10">
      <div class="bg-white/5 rounded-lg p-4">
        <p class="text-xs text-gray-400 mb-2">综合上涨概率</p>
        <p class="text-2xl font-bold text-[#42d392]">{{ prediction.probUpCombined }}%</p>
      </div>
      <div class="bg-white/5 rounded-lg p-4">
        <p class="text-xs text-gray-400 mb-2">综合下跌概率</p>
        <p class="text-2xl font-bold text-[#ff6b6b]">{{ prediction.probDownCombined }}%</p>
      </div>
    </div>

    <!-- 短线趋势 -->
    <div class="mb-6">
      <div class="flex items-center gap-3 mb-3">
        <span class="text-2xl font-bold" :class="getTrendColor(prediction.shortTermTrend)">
          {{ prediction.shortTermTrend }}
        </span>
        <span class="text-sm text-gray-400">短线趋势</span>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div class="bg-white/5 rounded-lg p-3">
          <p class="text-xs text-gray-400 mb-1">支撑位</p>
          <p class="text-lg font-semibold text-white">{{ prediction.keySupport }}</p>
        </div>
        <div class="bg-white/5 rounded-lg p-3">
          <p class="text-xs text-gray-400 mb-1">压力位</p>
          <p class="text-lg font-semibold text-white">{{ prediction.keyResistance }}</p>
        </div>
      </div>
    </div>

    <!-- 技术面 vs 消息面 -->
    <div class="mb-6 pb-6 border-b border-white/10">
      <h4 class="text-sm font-semibold text-white mb-3">概率对比</h4>
      <div class="space-y-3">
        <div>
          <div class="flex justify-between text-xs mb-1">
            <span class="text-gray-400">技术面</span>
            <span class="text-gray-300">↑ {{ prediction.probUpTechnical }}% / ↓ {{ prediction.probDownTechnical }}%</span>
          </div>
          <div class="h-2 bg-white/10 rounded-full overflow-hidden">
            <div class="h-full bg-gradient-to-r from-[#42d392] to-[#ff6b6b]" :style="{ width: prediction.probUpTechnical + '%' }"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between text-xs mb-1">
            <span class="text-gray-400">消息面</span>
            <span class="text-gray-300">↑ {{ prediction.probUpNews }}% / ↓ {{ prediction.probDownNews }}%</span>
          </div>
          <div class="h-2 bg-white/10 rounded-full overflow-hidden">
            <div class="h-full bg-gradient-to-r from-[#42d392] to-[#ff6b6b]" :style="{ width: prediction.probUpNews + '%' }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关键新闻 -->
    <div class="mb-6">
      <h4 class="text-sm font-semibold text-white mb-3">关键新闻</h4>
      <div class="space-y-2">
        <div v-for="(news, index) in prediction.topNews" :key="index" class="flex items-start gap-2">
          <span class="text-xs font-semibold text-[#42d392] mt-1">{{ index + 1 }}</span>
          <div class="flex-1">
            <p class="text-sm text-gray-300">{{ news.title }}</p>
            <p class="text-xs text-gray-500">影响力评分: {{ news.score }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 量能描述 -->
    <div class="mb-6 pb-6 border-b border-white/10">
      <h4 class="text-sm font-semibold text-white mb-2">量能描述</h4>
      <p class="text-sm text-gray-400 leading-relaxed">{{ prediction.volumeInterpretation }}</p>
    </div>

    <!-- 模型信息 -->
    <div class="flex items-center justify-between text-xs text-gray-500">
      <span>{{ prediction.modelName }}</span>
      <span>{{ prediction.generatedTime }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Prediction {
  predictDate: string
  indexCode: string
  indexName: string
  currentPrice: number
  technicalAnalysis: string
  newsAnalysis: string
  keySupport: number
  keyResistance: number
  shortTermTrend: string
  volumeInterpretation: string
  probUpTechnical: number
  probDownTechnical: number
  probUpNews: number
  probDownNews: number
  probUpCombined: number
  probDownCombined: number
  modelName: string
  generatedTime: string
  topNews: Array<{ title: string; score: number }>
}

defineProps<{
  prediction: Prediction
}>()

const getTrendColor = (trend: string) => {
  if (trend === '↑') return 'text-[#42d392]'
  if (trend === '↓') return 'text-[#ff6b6b]'
  return 'text-gray-400'
}
</script>

<style scoped>
.prediction-card {
  background: linear-gradient(135deg, 
    rgba(10, 10, 10, 0.85) 0%, 
    rgba(15, 20, 18, 0.85) 50%, 
    rgba(15, 18, 25, 0.85) 100%
  );
  transition: all 0.3s ease;
}

.prediction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(66, 211, 146, 0.15);
}
</style>
